<template>
  <div>
    <div class="search-container" :style="{ backgroundImage: `url(${bgImageUrl})` }">
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="12">
          <div style="display: flex;">

            <div @click="sanjiaoShow = true" :class="sanjiaoShow === true ? 'Sproduct' : 'Sshop'">搜商品
              <i v-if="sanjiaoShow === true" class="el-icon-caret-top"></i>
            </div>
            <div @click="sanjiaoShow = false" :class="sanjiaoShow === false ? 'Sproduct' : 'Sshop'">
              搜商家
              <i v-if="sanjiaoShow === false" class="el-icon-caret-top"></i>
            </div>

          </div>
          <!-- icon prefix-icon="el-icon-search" -->
          <el-input v-if="sanjiaoShow === true" v-model="searchInput" placeholder="请要输入要搜索的商品" class="search-input">
            <el-button class="buttonPayStype" slot="append" icon="el-icon-search" type="primary"
              @click="search">搜索</el-button>
          </el-input>


          <el-input v-if="sanjiaoShow === false" v-model="searchInput" placeholder="请要输入要搜索的商家" class="search-input">
            <el-button class="buttonPayStype" slot="append" icon="el-icon-search" type="primary"
              @click="search">搜索</el-button>
          </el-input>


        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "newSearch",
  data() {
    return {
      activeTab: 'product',
      searchInput: '',
      // 替换为实际的背景图片地址
      bgImageUrl: require('../../../static/engineering5188/homPage/searchBg.png'),
      sanjiaoShow: true


    };
  },
  methods: {
    search() {
      if (this.searchInput.trim() !== '') {
        if (this.sanjiaoShow) {
          this.$router.push({
            path: '/haishiSearchResult',
            query: { keyword: this.searchInput,tabshow:1 }
          })
        } else {
          this.$router.push({
            path: '/haishiSearchResult',
            query: { keyword: this.searchInput,tabshow:2 }
          })
        }
      }
    }
  }
};

</script>

<style scoped lang="less">
.el-icon-caret-top {
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  margin: auto;
}

.Sshop {
  position: relative;
  width: 80px;
  height: 42px;
  border-radius: 4px 4px 0px 0px;
  text-align: center;
  line-height: 42px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  font-style: normal;
  text-transform: none;
}

.Sproduct {
  position: relative;
  width: 80px;
  height: 42px;
  background: #FF7700;
  border-radius: 4px 4px 0px 0px;
  text-align: center;
  line-height: 42px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  font-style: normal;
  text-transform: none;
}

/deep/ .el-input-group__append,
.el-input-group__prepend {
  border: none;
  border-radius: 0px 6px 6px 0px;
}

.buttonPayStype {
  width: 118px;
  height: 52px;
  background: linear-gradient(90deg, #FF7E00 0%, #FF6A00 100%);
  border-radius: 0px 6px 6px 0px;
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF !important;
  font-style: normal;
  text-transform: none;
  border: none;
}

/deep/ .el-input__inner {
  width: 632px;
  height: 52px;
  background: #FFFFFF;
  border-radius: 6px 0px 0px 6px;
  height: 52px;
}

.search-container {
  height: 300px;
  background-size: cover;
  background-position: center;
  display: flex;
  // justify-content: center;
  align-items: center;
  padding-left: 180px;
}

.search-tabs {
  margin-bottom: 15px;
}
</style>